<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions" 
	>

<h:head>

	<link type="text/css" rel="Stylesheet"
		href="../../css/jquery-ui-1.8.20.custom.css" />

	<link type="text/css" rel="Stylesheet" href="../../css/style_coopac.css" />
	<h:outputScript library="primefaces" name="jquery/jquery.js" /> 
	<h:outputScript library="js" name="jquery.blockUI.js"  />				<!-- bloqueo  -->
	<h:outputScript library="js" name="jquery-ui-1.8.20.custom.min.js"  />	
	<h:outputScript library="js" name="jquery.maskedinput-1.3.js" />		<!-- digitos telefonos  -->
	<h:outputScript library="js" name="jquery.alphanumeric.js" /> 			<!-- solo letras  -->
	<script >
		$(document).ready(function(){
			$('div.block').block({ 
				message: ""
			}); 
		});
		$(function(){
			//bloqueo------------
			$('.editPersonaN,.newPersonaN').live('click',function(){
				$('div.block').unblock(); 
				return false;
			});
			$('.buscar').click(function(){
				if($('.numDocPer').val()!="")
				alert("hodfdfla");
				return false;		
			});
			$('.btnBuscarByNumDoc').live('click',function(){
				$('div.block').block({ 
					message: ""
				});
				return false;
			});	
			//bloqueo_/_/_/_/_/_/_
			//popup de confirmacion guardar persona-------------		
			$('.btnBuscarByNumDoc').live('click',function(){
				$('#popupExitingSearch').dialog({modal:true});
				return false;
			});
			//popup de confirmacion guardar persona_/_/_/_/_/_/_/
			//estandar telefono---------------
			$('.personaNumDocIde,.conyugueNumDocIde,.intfamiNumDocIde').live('click',function(){				
				$(this).mask("99999999");
			});	
			$('.personaTlfFijo').live('click',function(){				
				$(this).mask("999-999");
			});
			$('.personaTlfCelular').live('click',function(){				
				$(this).mask("999999999");
			});	
			//estandar telefono_/_/_/_/_/_/_/_/
			//solo letras---------------
			$('.personaApePat,.personaApeMat,.personaNom').live('click',function(){				
				$(this).alpha({allow:" "});
			});
			$('.conyugueApePat,.conyugueApeMat,.conyugueNom').live('click',function(){				
				$(this).alpha({allow:" "});
			});
			$('.intfamiApePat,.intfamiApeMat,.intfamiNom').live('click',function(){				
				$(this).alpha({allow:" "});
			});
			$('.ingresoDatosLaborales,.anexoFijoPersona,.anexoOtroTlfPersona,.numOtroTlfPersona').live('click',function(){				
				$(this).numeric();
			});
			//solo letras_/_/_/_/_/_/_/_/
			
		});
	</script>
</h:head>

<h:body>
	<div id="contenedor">
		<div id="headerPlataforma"></div>

		<div id="menu">
			<ui:include src="../00_genericos/menu.xhtml"></ui:include>
		</div>

		<div id="formularios">
			<div id="cuerpo">
					<p:panel header="Registro de Solicitud de Socio - Persona" style="font-size:20px; height:50px;">
					</p:panel>
					<h:form id="form2">
					<p:panel id="panelbuscarPersona" header="Buscar Persona" toggleable="true">
						<div class="rowForm">							
							<div class="buttonSearch">
								<p:commandButton actionListener="#{solicPersona.newbtnPeronsN}" 
								 				 icon="ui-icon-document"  title="nuevo" styleClass="newPersonaN"
								 				 update=":form:panelBotonesPersonaN"
								>
								</p:commandButton>
							</div>
							<div class="buttonSearch">
								<p:commandButton actionListener="#{solicPersona.buscarByNumDocumento}" 
												 styleClass="btnBuscarByNumDoc"
												 update=":form:panelDatosBasico,:form:panelDatosDomiciliarios" 
												 icon="ui-icon-search"
								>
								</p:commandButton>
							</div>
							<div class="fieldAutoComplete">
								<p:autoComplete id="numdocPersN" value="#{solicPersona.numdocumentoPersonaN}"   
                  					  completeMethod="#{solicPersona.autoCompletado}" forceSelection="true">
                  			    </p:autoComplete>  
							</div>								
						</div>
					</p:panel>
					</h:form>
					<h:form id="form" prependId="true">
					<div class="block"><!-- div del block -->
					<p:panel id="panelDatosBasico" header="Datos Persona Básicos II" toggleable="true">
						<div class="rowForm">
							<div class="label">
								<label>Ape.Paterno:</label>
							</div>
							<div class="field">
								<p:inputText id="apePatN"	styleClass="personaApeMat"
									value="#{solicPersona.personaN.apellidoPaternoRazonSocial}"
									style="width:453px" 
									required="#{fichaSocioP.required}"  title="#{fichaSocioP.validate?'':'Campo Obligatorio'}"
								/>
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Ape.Materno:</label>
							</div>
							<div class="field">
								<p:inputText  styleClass="personaApeMat"
											  value="#{solicPersona.personaN.apellidoMaterno}" 
											  style="width:453px"  
											  required="#{fichaSocioP.required}"  title="#{fichaSocioP.validate?'':'Campo Obligatorio'}" 
								/>
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Nombres:</label>
							</div>
							<div class="field">
								<p:inputText styleClass="personaNom"
											 value="#{solicPersona.personaN.nombrePersonaNombreComercial}"
											 style="width:453px" 
											 required="#{fichaSocioP.required}"  title="#{fichaSocioP.validate?'':'Campo Obligatorio'}"
								/>
							</div>
						</div>

						<div class="rowForm">
							<div class="label">
								<label for="namevv">Tipo Doc.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{solicPersona.tipoDocumentoN.idTipoMaestro}"
												 style="width:160px"
												 required="#{fichaSocioP.required}"  title="#{fichaSocioP.validate?'':'Campo Obligatorio'}"
								>
									<f:selectItem itemLabel="Seleccione" />
									<f:selectItems value="#{maestro.listaTipodocumento}" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label for="namevv">Número:</label>
							</div>
							<div class="field">
								<p:inputText styleClass="personaNumDocIde"	 
											 value="#{solicPersona.documentoPersonaN.numero}"
											 style="width:157px" 
											 required="#{fichaSocioP.required}"  title="#{fichaSocioP.validate?'':'Campo Obligatorio'}"
								/>
							</div>
						</div>
						
						<div class="rowForm">
							<div class="label">
								<label>Fch.Nacimiento:</label>
							</div>
							<div class="calendar">
								<p:calendar></p:calendar>
							</div>
							<div class="label">
								<label>Sexo:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{solicPersona.personaN.sexo}" style="width:160px"
												 required="#{fichaSocioP.required}"  title="#{fichaSocioP.validate?'':'Campo Obligatorio'}"
								>
									<f:selectItem itemLabel="Seleccione" />
									<f:selectItem itemValue="1" itemLabel="Hombre" />
									<f:selectItem itemValue="0" itemLabel="Mujer" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Estado Civil:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{solicPersona.tipoEstadoCivilN.idTipoMaestro}" style="width:160px"
												 required="#{fichaSocioP.required}"  title="#{fichaSocioP.validate?'':'Campo Obligatorio'}"
								>
									<f:selectItem itemLabel="Seleccione" />
									<f:selectItems value="#{maestro.listaEstadoCivil}" />
								</p:selectOneMenu>
							</div>
						</div>

						<div class="rowForm">
							<div class="label">
								<label for="namevv">Tipo Telef:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{solicPersona.tipoTelefonoN.idTipoMaestro}"
												 style="width:160px"
												 required="#{fichaSocioP.required}"  title="#{fichaSocioP.validate?'':'Campo Obligatorio'}"
							    >
									<f:selectItem itemLabel="Seleccione" />
									<f:selectItems value="#{maestro.listaTipotelefono}" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Número:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.telefonoPersonaN.numero}" styleClass="numOtroTlfPersona" 
											 style="width:157px"
											 required="#{fichaSocioP.required}"  title="#{fichaSocioP.validate?'':'Campo Obligatorio'}" 
							    />
							</div>
							<div class="label">
								<label>Anexo:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.telefonoPersonaN.anexo}"  styleClass="anexoOtroTlfPersona" 
									         style="width:157px"
								/>
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Email:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.personaN.email}" id="numEmailN"
									style="width:453px" />
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label>Página Web:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.personaN.paginaWeb}" id="numPagwebN"
									style="width:453px" />
							</div>
						</div>
					</p:panel>
					</div>


					<div class="block"><!-- div del block -->
					<p:panel id="panelDatosDomiciliarios"  header="Datos Domiciliarios" toggleable="true">
						<div class="rowForm">
							<div class="label">
								<label>Departamento:</label>
							</div>
							<div class="select">
								<p:selectOneMenu id="selectDepartamento"
									value="#{ubigeo.idDepartamento}" style="width:160px">
									<f:selectItem itemLabel="Dpto." />
									<f:selectItems value="#{ubigeo.listaDepartamento}" />
									<p:ajax update="selectProvincia, selectDistrito" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Provincia:</label>
							</div>
							<div class="select">
								<p:selectOneMenu id="selectProvincia"
									value="#{ubigeo.idProvincia}" style="width:160px">
									<f:selectItem itemLabel="Provincia" />
									<f:selectItems value="#{ubigeo.listaProvincia}" />
									<p:ajax update="selectDistrito" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label>Distrito:</label>
							</div>
							<div class="select">
								<p:selectOneMenu id="selectDistrito"
									value="#{ubigeo.idDistrito}" style="width:160px">
									<f:selectItem itemLabel="Distrito" />
									<f:selectItems value="#{ubigeo.listaDistrito}" />
									<p:ajax update="selectDistritoDummy"></p:ajax>
								</p:selectOneMenu>
								<p:selectOneMenu id="selectDistritoDummy"
									value="#{solicPersona.distritoN.idUbigeo}" style="width:160px; display:none;">
									   <f:selectItem itemLabel="Dummy" itemValue="#{ubigeo.idDistrito}" />
							   </p:selectOneMenu>
							</div>
						</div>
						

						<div class="rowForm">
							<div class="label">
								<label for="namevv">Tipo Zona.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{solicPersona.tipoZonaN.idTipoMaestro}"
												 style="width:160px"
												 required="#{fichaSocioP.required}"  title="#{fichaSocioP.validate?'':'Campo Obligatorio'}"
								>
									<f:selectItem itemLabel="Seleccione" />
									<f:selectItems value="#{maestro.listaZona}" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label for="namevv">Zona:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.nombreZona}" id="zonaN"
											 style="width:157px"
											 required="#{fichaSocioP.required}"  title="#{fichaSocioP.validate?'':'Campo Obligatorio'}" 
								/>
							</div>
						</div>
						<div class="rowForm">
							<div class="label">
								<label for="namevv">Tipo Vía.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{solicPersona.tipoViaN.idTipoMaestro}" style="width:160px"
												 required="#{fichaSocioP.required}"  title="#{fichaSocioP.validate?'':'Campo Obligatorio'}"
								>
									<f:selectItem itemLabel="Seleccione" />
									<f:selectItems value="#{maestro.listaVia}" />
								</p:selectOneMenu>
							</div>
							<div class="label">
								<label for="namevv">Vía:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.nombreVia}" id="viaN"
									style="width:157px"
									required="#{fichaSocioP.required}"  title="#{fichaSocioP.validate?'':'Campo Obligatorio'}" 
								/>
							</div>
						</div>

						<div class="rowForm">
							<div class="label">
								<label>Número:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.numero}" id="numDirN"
									style="width:157px" />
							</div>
							<div class="label">
								<label>#Dpto:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.departamento}" id="depDirN"
									style="width:157px" />
							</div>
							<div class="label">
								<label>Interior:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.interior}" id="inDirN"
									style="width:157px" />
							</div>
						</div>

						<div class="rowForm">
							<div class="label">
								<label>Manzana:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.manzana}" id="manDirN"
									style="width:157px" />
							</div>
							<div class="label">
								<label>Lote:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.lote}" id="lotDirN"
									style="width:157px" />
							</div>
							<div class="label">
								<label>Kilómetro:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.kilometro}" id="kilDirN"
									style="width:157px" />
							</div>
						</div>


						<div class="rowForm">
							<div class="label">
								<label>Referencia:</label>
							</div>
							<div class="field">
								<p:inputText value="#{solicPersona.direccionPersonaN.referencia}"  id="refDirN"
									style="width:453px" />
							</div>
							<div class="label">
								<label>Tipo Vivienda.:</label>
							</div>
							<div class="select">
								<p:selectOneMenu value="#{solicPersona.tipoViviendaN.idTipoMaestro}"
									   		     style="width:160px"
									   		     required="#{fichaSocioP.required}"  title="#{fichaSocioP.validate?'':'Campo Obligatorio'}"
								>
									<f:selectItem itemLabel="Seleccione" />
									<f:selectItems value="#{maestro.listaTipovivienda}" />
								</p:selectOneMenu>
							</div>
						</div>
					</p:panel>
					</div>
					<p:panel id="panelBotonesPersonaN" header="Procesar" toggleable="true">
						<div class="rowFormProcess">
							<div class="buttonProcess">
								<p:commandButton actionListener="#{solicPersona.addSolicPersona}" value="Registrar"
												 update=":form:panelBotonesPersonaN"
												 disabled="#{fichaSocioP.disableBtnAddPersonaN}"
								>
								</p:commandButton>
							</div>	
							<div class="buttonProcess">
								<p:commandButton actionListener="#{solicPersona.clearPersonaN}" value="Limpiar"	
												 update=":form:panelBotonesPersonaN"											
												 disabled="#{fichaSocioP.disableBtnClearPersonaN}"
								>
								</p:commandButton>
							</div>	
							<div class="buttonProcess">
								<p:commandButton actionListener="#{solicPersona.editPersona}"	value="Editar"												
												 styleClass="editPersonaN"
												 update=":form:panelBotonesPersonaN"
												 disabled="#{fichaSocioP.disableBtnEditPersonaN}"	
								>
								</p:commandButton>
							</div>		
							<div class="buttonProcess">					
								<p:commandButton value="Imprimir" actionListener="#{solicPersona.toPDF}"
								>
								</p:commandButton>
							</div>
						</div>
					</p:panel>
					</h:form>
				</div>
				<pe:tooltip global="true" position="left center" targetPosition="right center" forSelector=".ui-state-error"/>
		</div>
		<div id="footerPlataforma"></div>
	</div>
</h:body>
</html>